<template>
  <div>
    <div>
      <div class="product-main-wrap">
        <div>
          <p class="item">商品管理</p>
        </div>
        <form action="">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-row>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>商品状态：</span>
                      <el-select
                        v-model="value"
                        placeholder="全部"
                        class="selecte-radiu"
                      >
                        <el-option
                          v-for="item in state"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                      <span>商品分类：</span>
                      <el-select
                        v-model="value1"
                        placeholder="全部"
                        class="selecte-radiu"
                      >
                        <el-option
                          v-for="item in classify"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>商品名称：</span>
                      <el-input
                        v-model="input"
                        placeholder="请输入"
                        class="input-product"
                      />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                      <span>商品编号：</span>
                      <el-input
                        v-model="input1"
                        placeholder="请输入"
                        class="input-product"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row class="buttons">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <div class="btns">
                  <input type="reset" class="reset" />
                  <el-button type="primary" round class="btn-screen"
                    >筛选</el-button
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </form>
      </div>
      <div>
        <div style="margin-top: 20px"></div>
      </div>
    </div>
    <br />
    <br />
    <p class="item">已上架商品 <span>共87521个商品</span></p>
    <div class="cen">
      <ul>
        <li class="title">
          <span><input type="checkbox" /></span>
          <span>商品条码</span>
          <span>商品名称</span>
          <span>商品分类</span>
          <span>售价</span>
          <span>库存</span>
          <span>销量</span>
          <span>状态</span>
          <span>创建日期</span>
          <span>操作</span>
        </li>
        <li class="content" v-for="item in list" :key="item.goodsId">
          <span><input type="checkbox" /></span>
          <span>{{ item.goodsNum }}</span>
          <span>{{ item.goodsName }}</span>
          <span>{{ item.goodsClass }}</span>
          <span>{{ item.goodsSale }}</span>
          <span>{{ item.goodsCount }}</span>
          <span>{{ item.sale }}</span>
          <span>{{ item.goodsState }}</span>
          <span>{{ item.goodsDate }}</span>
          <span>
    
            <a
              style="color: red"
              @click="del(item.goodsId)"
              :name="item.goodsId"
              >删除</a
            >
          </span>
        </li>
      </ul>
    </div>
    <br />
    <el-pagination
      style="text-align: center; margin-left: 340px"
      background="true"
      layout="prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" scope>
import { defineComponent, onMounted, ref } from "vue";
import puton from "../../../../mock/puton";

export default defineComponent({
  setup() {
  
    const del = async (goodsId: number) => {
        const a=confirm("是否删除");
        if (a){

   
  const res: any = await puton.removeData({
        goodsId: goodsId,
      });

      // console.log("res", res);
      // console.log(goodsId);
      const res1: any = await puton.getData({
        page: num.value,
        size: 10,
      });
      // console.log(num.value);
      count.value = res1.count;
      list.value = res1.result;
           }
    };
    const currentPage = ref(1);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = async (val: number) => {
      console.log(val);
      num.value = val;
      const res: any = await puton.getData({
        page: num.value,
        size: 10,
      });
      console.log(num.value);
      list.value = res.result;
    };
    const value = ref("");
    const value1 = ref("");
    const classify = [
      {
        value: "运动鞋",
        label: "运动鞋",
      },
      {
        value: "休闲鞋",
        label: "休闲鞋",
      },
      {
        value: "板鞋",
        label: "板鞋",
      },
      {
        value: "篮球鞋",
        label: "篮球鞋",
      },
      {
        value: "拖鞋",
        label: "拖鞋",
      },
      {
        value: "皮鞋",
        label: "皮鞋",
      },
    ];
    // const value = ref("");
    const state = [
      {
        value: "已下架",
        label: "已下架",
      },
      {
        value: "销售中",
        label: "销售中",
      },
      {
        value: "未上架",
        label: "未上架",
      },
    ];

    const input = ref("");
    const input1 = ref("");
    const count = ref(0);
    interface NavList {
      [propname: string]: string;
    }
    let list = ref<NavList[]>([]);
    const num = ref<number>(1);
    onMounted(async () => {
      const res: any = await puton.getData({
        page: num.value,
        size: 10,
      });

      console.log("data", res.result);
      list.value = res.result;
      count.value = res.count;
    });
    return {
      value,
      count,
      value1,
      state,
      classify,
      input,
      input1,
      list,
      num,
      currentPage,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      del,
    };
  },
});
</script>

<style lang="less" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.cen {
  .content {
    display: flex;
    justify-content: space-around;
    height: 66px;
    line-height: 66px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    background: white;
    span {
      flex: 1;
      a {
        margin-right: 3px;
      }
    }
  }
  .title {
    display: flex;
    height: 66px;
    justify-content: space-around;
    line-height: 66px;
    font-size: 16px;
    color: white;
    background: #126dff;
    text-align: center;
    align-items: center;
    span {
      width: 10%;
    }
  }
}
.reset {
  appearance: none;
  height: 30px;
  width: 58px;
  border-width: 1px;
  font-size: 14px;
  background-color: #ecf5ff;
  border-color: #a0cfff;
  border-radius: 15px;
  color: #40a5ff;
  margin-right: 30px;
}
.el-col {
  border-radius: 4px;
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid blue;
  span {
    font-size: 12px;
  }
}
.product-main-wrap {
  /deep/.el-input__wrapper {
    border-radius: 50px !important;
  }
  .el-col {
    padding: 10px;
  }
  .input-product {
    // /deep/ .el-input {
    width: 50%;
    // }
  }
  .buttons {
    height: 70px;
    .btns {
      width: 300px;
      margin: 0 auto;
      margin-top: 10px;
      .btn-reset {
        background: #eaf0ff;
        color: #004dff;
        margin-right: 50px;
      }
      .btn-screen {
        background: #126dff;
        width: 150px;
      }
    }
  }
}
</style>
